<template>
  <div style="width: 900px;height:800px;margin-top: 30px;margin-left: 15px">
  <div class="login-container">
  <div class="employee-container">
    <el-row>
    </el-row>
       <el-divider><p style="font-family:方正粗黑宋简体;color:salmon;font-size:25px;">用户观影记录信息管理</p></el-divider>
    <el-row>
      <el-form label-width="10px">
        <el-row>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="账号">
              <el-input v-model="formInline.user" placeholder="QQ号码/手机/微信/账号昵称"></el-input>
            </el-form-item>
            <el-form-item label="搜索区域">
              <el-select v-model="formInline.region" placeholder="区域类型">
                <el-option label="观影历史记录" ></el-option>
                <el-option label="最新观影内容" ></el-option>
                <el-option label="喜好类型" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <div>
        <el-button-group>
          <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加用户信息</el-button>
          <el-button @click="btnAddClick" type="primary" icon="el-icon-delete-solid">删除</el-button>
<!--          <el-button @click="btnAddClick" type="primary" icon="el-icon-view">查询</el-button>-->
         </el-button-group>
      </div>
      <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        prop="ID"
        label="账户ID"
        width="180">
      </el-table-column>
        <el-table-column
          prop="name"
          label="账户昵称"
          width="180">
        </el-table-column>
      <el-table-column
        prop="age"
        label="账户年龄"
        width="120"
        sortable>
      </el-table-column>
      <el-table-column
        prop="gender"
        label="用户性别">
      </el-table-column>
        <el-table-column
          prop="content"
          label="最新观影记录">
        </el-table-column>
        <el-table-column
          prop="like"
          label="喜好类型">
        </el-table-column>
        <el-table-column
          prop="time"
          label="观影时间区间">
        </el-table-column>
        <el-table-column
          prop="place"
          label="最近登录地">
        </el-table-column>
      </el-table>
      <el-divider><p style="font-family:方正粗黑宋简体;color:red;font-size:20px;">用户观影详细统计图</p></el-divider>
    </el-row>
    <div style="width: 900px;height:800px;margin-top: 30px;margin-left: 15px">
      <div style="height:800px ;width:900px ;">
        <div style="width: 900px;height:300px;">
          <div id="chart" style="width: 480px;height:300px;float:left;margin: 0px;"></div>
          <div id="chart1" style="width: 400px;height:380px; float:right;margin: 0px;"></div>
        </div>
        <div style="width: 900px;height:500px;">
          <div  id="chart2" style="width:480px; height:350px ; float:left;margin: 0px"></div>
          <div  style="width: 400px;height:300px; float: right;margin: 0px">

            <div style="width: 400px;height:450px; float: right;margin: 0px">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--不参与布局-->
    <el-dialog
      title="用户信息添加"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose">
      <el-form>
        <el-form-group>
          <el-form-item label-width="80px" label="账户ID">
          <el-input v-model="employee.ID"/>
          </el-form-item>
        </el-form-group>
        <el-form-group>
          <el-form-item label-width="80px" label="账户昵称">
            <el-input v-model="employee.name"/>
          </el-form-item>
        </el-form-group>
      </el-form>
     <span class="el-dialog__footer" slot="footer"  >
        <el-button @click="sumbmitHandle"type="primary">确定</el-button>
       <el-button @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  export default {
    name: "Employee", data(){
      return{
        tableData:[
          {
            ID:12345,
            name:'弗垃圾英杰',
            age:20,
            gender:'男',
            content:'杰子哥下饭集锦',
            like:'游戏教学短视频',
            time:'2021-04-05-00:15',
            place:'天津市海河教育园'
          },
          {
            ID:1314520,
            name:'叫爸爸',
            age:18,
            gender:'男',
            content:'《锦衣之下》',
            like:'现代电视剧',
            time:'2021-04-15-11:35',
            place:'天津市海河教育园'
          },
          {
            ID:94468545,
            name:'快乐星球',
            age:19,
            gender:'女',
            content:'《为歌而赞》',
            like:'科幻电影',
            time:'2021-04-18-10:25',
            place:'D-101'
          },
          {
            ID:522634184,
            name:'铁甲小宝',
            age:17,
            gender:'男',
            content:'《赘婿》',
            like:'非现代电视剧',
            time:'2021-04-08-09:15',
            place:'E-508'
          },

        ],
        dialogVisible:false,
        employee:{
          name:"",
          age:"",
          dept:{},
          status:'',
        },
        formInline: {
          user: '',
          region: ''
        }
      }
    },mounted1(){
      var _this=this;
      this.axios(
        {
          url:'http://localhost:3000/employee/list',
          method:'get'
        }
      ).then(function (res) {
        _this.tableData=res.data;
      })
    },
    mounted() {
      var dom1 = document.getElementById('chart1');
      var chart = this.$echarts.init(dom1);
      var option1 = {title: {
          text: '观影年龄比例'
        },
        tooltip: {},
        legend: {
          data:['年龄比例']
        },
        xAxis: {
          data: ["10-20岁","20-30岁","30-40岁","40-50岁"]
        },
        yAxis: {},
        series: [{
          name: '年龄比例',
          type: 'bar',
          data: [30, 40, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表
      chart.setOption(option1);
      var dom2= document.getElementById('chart2');
      var chart = this.$echarts.init(dom2);
      var option2 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '性别比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 105, name: '男性'},
              {value: 0, name: '变性（男-女）'},
              {value:0, name: '变性（女-男）'},
              {value: 102, name: '女性'}
            ]
          }
        ]
      };
      chart.setOption(option2);
      var dom = document.getElementById('chart');
      var chart = this.$echarts.init(dom);
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          data: ['非现代电视剧', '电影', '电视剧', '科幻电影', '新闻头条', '视频广告', '现代电视剧', '体育赛事', '短视频', '非现代电视剧']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14,
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1548, name: '电视剧'},
              {value: 775, name: '非现代电视剧'},
              {value: 679, name: '电影', selected: true}
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              {value: 1048, name: '现代电视剧'},
              {value: 335, name: '非现代电视剧'},
              {value: 310, name: '科幻电影'},
              {value: 251, name: '体育赛事'},
              {value: 234, name: '新闻头条'},
              {value: 147, name: '短视频'},
              {value: 135, name: '视频广告'},
              {value: 102, name: '纪录片'}
            ]
          }
        ]
      };
      chart.setOption(option);
    },
    methods:{
      btnAddClick(){
        this.dialogVisible=true;
      },
      onSubmit() {
        console.log('submit!');
      },
      handleClose(){
        this.dialogVisible=false;
      },sumbmitHandle(){
        var _this=this;
        this.axios({
          url:'http://127.0.0.1:3000/emp/add',
          method: 'get',
          params:{
            name:this.employee.name,
            ID:this.employee.ID
          }
        }).then(function (res) {
          if(res.data.flag){
            _this.tableData=res.data.addlist;
            _this.$message('添加成功')
            _this.dialogVisible=false;
          }else {
            alert('添加失败');
          }
        })
      }
    }
  }
</script>
<style>
</style>
